<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>表单练习</title>
    <style type="text/css">
      label {
        font-weight: bold;
      }
      input:hover {
        border-color: orange;
      }
      select:hover {
        border-color: orange;
      }
    </style>
  </head>

  <body>
    <form
      action="#"
      method="get"
      accept-charset="utf-8"
      style="
        width: 250px;
        height: 250px;
        border: 1px solid gray;
        background-color: #fc6;
        padding: 10px;
      "
    >
      <p>
        <label for="userName">用户名：</label>
        <input type="text" name="userName" value="" id="userName" />
      </p>
      <p>
        <label for="password">密&nbsp;&nbsp;码：</label>
        <input type="password" name="password" value="" id="password" />
      </p>
      <p>
        <label>性&nbsp;&nbsp;别：</label>
        <input
          type="radio"
          name="gen"
          value="male"
          id="male"
          checked="checked"
        />
        <img src="images/male.gif" alt="男" />&nbsp;&nbsp;
        <input type="radio" name="gen" value="female" id="female" />
        <img src="images/female.gif" alt="女" />
      </p>
      <p>
        <label>爱&nbsp;&nbsp;好：</label>
        <input
          type="checkbox"
          name="hobby"
          value="sport"
          id="sport"
          checked="checked"
        />
        运动
        <input type="checkbox" name="hobby" value="chat" id="chat" />
        聊天
        <input type="checkbox" name="hobby" value="game" id="game" />
        游戏
      </p>
      <p>
        <label for="profession">职&nbsp;&nbsp;业：</label>
        <select name="profession" id="profession">
          <option value="student" selected="selected">学生</option>
          <option value="teacher">老师</option>
        </select>
      </p>
      <p>
        <input type="submit" name="submit" value="提交" id="submit" />
        <input type="reset" name="reset" value="清空" id="reset" />
      </p>
    </form>
  </body>
</html>
